<template>
  <div class="xiangqing">
    <!-- 顶部 -->
    <van-nav-bar
      title="不 凡"
      left-text="返回"
      fixed
      left-arrow
      @click-left="$router.back()"
    />
    <!-- banner图 -->
    <div class="banner">123</div>
    <!-- 三种切换状态 -->
    <div class="hsyyds">
      <ul>
        <li @click="itemEvent(item)" v-for="item in tabbList" :key="item.id">
          <div :class="item.itit ? 'red' : ''">{{ item.name }}</div>
          <div class="price" v-if="item.name == '价格'">
            <van-icon :color="xfqyyds == 'up' ? 'red' : ''" name="arrow-up" />
            <van-icon
              :color="xfqyyds == 'down' ? 'red' : ''"
              name="arrow-down"
            />
          </div>
        </li>
      </ul>
    </div>
    <!-- 商品详情 -->
    <div class="bsyyds">
      <ul>
        <li v-for="item in list" :key="item.id">
          <img :src="item.list_pic_url" alt="" />
          <p class="title">{{ item.name }}</p>
          <p class="jiage">￥{{ item.retail_price }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { goodsList } from "@/api/详情/xiangqing.js";
export default {
  name: "XiangQing",
  data() {
    return {
      order: "",
      list: [],
      tabbList: [
        {
          id: 1,
          name: "综合",
          itit: true,
        },
        {
          id: 2,
          name: "价格",
          itit: false,
        },
        {
          id: 3,
          name: "分类",
          itit: false,
        },
      ],
      xfqyyds: "moren",
    };
  },
  methods: {
    // 请求接口封装成函数
    iniet() {
      var obj = {
        isHot: "",
        isNew: "",
        order: this.order,
      };
      if (this.$route.query.id == 1) {
        //新品首发
        obj.isNew = "1";
      } else {
        // 人气推荐
        obj.isHot = "1";
      }
      goodsList({
        params: obj,
      }).then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },

    // 点击事件
    itemEvent(val) {
      this.tabbList.forEach((ele) => {
        ele.itit = false;
      });
      val.itit = true;
      if (val.name == "价格") {
        if (this.xfqyyds == "moren") {
          this.xfqyyds = "up";
          this.order = "asc";
        } else if (this.xfqyyds == "up") {
          this.xfqyyds = "down";
          this.order = "desc";
        } else if (this.xfqyyds == "down") {
          this.xfqyyds = "up";
          this.order = "asc";
        }
      } else {
        this.xfqyyds = "moren";
        this.order = "";
      }
      this.iniet();
    },
  },
  created() {
    // console.log(this.$route);
    // console.log(this.$route.query.id);
    this.iniet();
  },
};
</script>

<style lang="less" scoped>
.xiangqing {
  width: 100%;
  height: 100vh;
  .banner {
    margin-top: 50px;
    width: 100%;
    height: 154px;
    background-color: aqua;
  }
  .hsyyds {
    ul {
      background-color: #fff;
      width: 100%;
      list-style: none;
      display: flex;
      justify-content: space-around;
      align-items: center;
      li {
        padding: 10px 0;
        display: flex;
        align-items: center;
      }
      .price {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .red {
        color: red;
      }
    }
  }
  .bsyyds {
    margin-top: 15px;
    ul {
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      li {
        margin-bottom: 5px;
        background-color: #fff;
        width: 49%;
        text-align: center;
        img {
          width: 100%;
          height: 100%;
        }
        .title {
          color: #000;
        }
        .jiage {
          color: red;
        }
      }
    }
  }
}
</style>